<template>
<div class="song">
  <div class="song-top">
    <h3>最新音乐</h3>
  </div>
  <songListItem :songs="songs"></songListItem>
</div>
</template>

<script>
import songListItem from '../songListItem'
export default {
  name: 'newsongs',
  components: {
    songListItem
  },
  props: {
    songs: {
      type: Array,
      default: () => [],
      required: true
    }
  }
}
</script>

<style scoped lang="scss">
  @import "../../assets/css/mixin";
  @import "../../assets/css/variable";
.song{
  @include bg_sub_color();
  .song-top{
    width: 100%;
    height: 84px;
    @include bg_sub_color();
    padding: 0 20px;
    border-bottom: 1px solid #ccc;
    h3{
      line-height: 84px;
      @include font_size($font_large);
      font-weight: bold;
    }
  }

}
</style>
